<template>
  <div>
    <van-nav-bar
      style="borderBottom: 0.5px solid #eee;"
      :title="this.title"
      right-text="管理"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
    />
    <div>
      <van-row
        style="textAlign: center; padding: 10px 0"
        type="flex"
        justify="space-between"
      >
        <van-col style="marginBottom: 10px; textAlign: center" span="6" v-for= "(item,index) in list"  :key = "index" @click="point(item,index)">
          <van-icon :name=item.icon_name size="1.8rem" />
          <div>{{item.name}}</div>
        </van-col>
       
      </van-row>
    </div>
    <div>
      <van-cell style="backgroundColor: #eee" title="单元格" icon="shop-o">
        <!-- 使用 right-icon 插槽来自定义右侧图标 -->
        <template #right-icon>
          <van-icon name="plus" @click="create(2)" class="search-icon" />
        </template>
      </van-cell>
    </div>

   
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: "课程名称",
      list :[
        {
          name :"教案",
          icon_name: "description",
          address:"/lesson"
          
        },
        {
          name :"章节",
          icon_name: "orders-o",
          address: "/charpter"

        },
        {
          name :"作业",
          icon_name: "records",
          address:"/homework"

        },
        {
          name :"资料",
          icon_name: "points"

        },
        {
          name :"通知",
          icon_name: "volume-o"

        },
        {
          name :"提升",
          icon_name: "bar-chart-o"
        },
        {
          name :"讨论",
          icon_name: "chat-o"

        },
        {
          name :"好友",
          icon_name: "manager-o"

        },
      ],
      
    };
  },
  methods: {
    point(item,index){
      console.log(item.name);
      console.log(index);
      this.$router.push(item.address)
    },
    onClickLeft() {
      console.log(1111);
      this.$router.go(-1);
    },
    onClickRight() {
      console.log(2222);
    },
    create(i) {
      console.log(++i);
    },
  },
};
</script>
<style scoped>
/deep/.van-icon {
  color: black;
}
.search-icon {
  font-size: 16px;
  line-height: inherit;
}
</style>